<template>
  <div class="view-role w100 h100">
    <div class="module-tree">
      <vue-scroll>
        <div class="common-title"><span></span>平台权限树</div>
        <el-tree class="_tree"
                 v-loading="loading"
                 show-checkbox
                 default-expand-all
                 highlight-current
                 node-key="id"
                 :default-checked-keys="platformDefaultChecked"
                 :expand-on-click-node="false"
                 ref="platformTree" :data="platformTree" :props="defaultProps">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i class="el-icon-tickets" v-if="data.type !== 2" style="margin-right: 5px"></i>{{ node.label }}</span>
          </span>
        </el-tree>
        <div class="common-title" style="margin-top: 20px"><span></span>APP权限树</div>
        <el-tree class="_tree"
                 v-loading="loading"
                 show-checkbox
                 default-expand-all
                 highlight-current
                 node-key="id"
                 :default-checked-keys="appDefaultChecked"
                 :expand-on-click-node="false"
                 ref="appTree" :data="appTree" :props="defaultProps">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i class="el-icon-tickets" v-if="data.type !== 2" style="margin-right: 5px"></i>{{ node.label }}</span>
          </span>
        </el-tree>
      </vue-scroll>
    </div>
    <div class="role-info">
      <vue-scroll>
        <div class="title"><span></span>角色信息</div>
        <div class="role-list">
          <div class="view-list" v-for="(item, index) in listKey" :key="index">
            <div class="key" :style="getStyle(index)">{{item.label}}</div>
            <div class="value" :style="getStyle(index)" v-if="item.label !== '角色类型'">{{roleForm[item.name]}}</div>
            <div class="value" :style="getStyle(index)" v-if="item.label === '角色类型'">{{getRoleLabel(roleForm[item.name])}}</div>
          </div>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
import Config from '../../../../config'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'viewRole',
  data () {
    return {
      loading: true,
      platformTree: [], // 平台权限树
      platformDefaultChecked: [], // 平台默认选中
      appTree: [], // app权限树
      appDefaultChecked: [], // app默认选中
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultChecked: [],
      listKey: [
        {
          name: 'sort',
          label: '角色编号'
        },
        {
          name: 'name',
          label: '角色名称'
        },
        {
          name: 'code',
          label: '角色编码'
        },
        {
          name: 'type',
          label: '角色类型'
        },
        {
          name: 'remark',
          label: '角色描述'
        }
      ],
      roleForm: {
        sort: -1,
        name: '',
        code: '',
        type: '',
        remark: ''
      },
      roleEnum: [
        {
          label: '管理员',
          value: 0
        },
        {
          label: '用户',
          value: 1
        }
      ]
    }
  },
  computed: {
    ...mapGetters('user', {
      module: 'getModule'
    })
  },
  mounted () {
    this.getRole()
    this.getModuleByRoleId()
      .then(data => {
        this.getAllModule(data)
      })
  },
  methods: {
    getRoleLabel (value) {
      let label = ``
      this.roleEnum.some(item => {
        if (value === item.value) {
          label = item.label
          return true
        }
      })
      return label
    },
    getStyle (index) {
      if (index % 2 === 0) {
        return `background: #f9f9f9`
      }
      return `background: #fff`
    },
    /**
     * 获取所有的菜单
     * */
    getAllModule (ids) {
      const url = `${Config.AUTH_URL}/menu/getAll`
      this.$http.get(url)
        .then(data => {
          this.appTree.splice(0)
          this.appTree = data.app
          this.platformTree.splice(0)
          this.platformTree = data.plate
          this.loading = false
        })
        .catch(e => {
          this.$message.warning('获取菜单数据失败')
          this.loading = false
        })
    },
    /**
      * 根据角色id获取菜单
      * */
    getModuleByRoleId () {
      return new Promise((resolve, reject) => {
        const url = `${Config.AUTH_URL}/getButtonByRoleIds`
        const param = {
          roles: this.$route.params.id
        }
        this.$http.get(url, param)
          .then(data => {
            console.log('data ', data)
            this.platformDefaultChecked.splice(0)
            this.platformDefaultChecked = this.preHandleAppChecked(data.plate)
            this.appDefaultChecked.splice(0)
            this.appDefaultChecked = this.preHandleAppChecked(data.app)
            resolve()
          })
          .catch(e => {
            reject(e)
          })
      })
    },
    /**
     * 预处理被选中的节点，筛选出只是子节点的id
     * */
    preHandleAppChecked (arr) {
      const ids = []
      arr.forEach(item => {
        if (item.children.length === 0) {
          ids.push(item.id)
        }
      })

      return ids
    },
    getRole () {
      const id = this.$route.params.id
      const url = `${Config.AUTH_URL}/role/getById`
      const param = {
        id
      }
      this.$http.get(url, param)
        .then(data => {
          this.roleForm = data
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .view-role {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    .module-tree {
      width: 430px;
      margin-right: 20px;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
      ._tree {
        margin: 20px 0 0 20px;
      }
      .highlight {
        color: #3C81FF;
      }
    }
    .common-title {
      font-size: 16px;
      font-weight: bold;
      color: #444;
    }
    .role-info {
      flex: 1;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .title {
        color: #3C81FF;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20px;
        span {
          background-color: #3C81FF;
          width: 2px;
          height: 14px;
          margin-right: 8px;
        }
      }
      .role-list {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        .view-list {
          height: 39px;
          line-height: 39px;
          color: #444;
          display: flex;
          justify-content: center;
          color: #666;
          font-size: 14px;
          .key {
            width: 150px;
            margin-right: 10px;
            padding-left: 30px;
          }
          .value {
            width: 500px;
            padding-left: 30px;
          }
        }
      }
    }
  }
</style>
